<div class="settings-container">
  <div class="flex align-items-center justify-content-between mb-4">
    <h1>Notifications Configuration</h1>
  </div>

  <!-- Loading/Error Component -->
  <app-loading-error-state
    *ngIf="notificationProviderLoading() || notificationProviderLoadError()"
    [loading]="notificationProviderLoading()"
    [error]="notificationProviderLoadError()"
    loadingMessage="Loading notification providers..."
    errorMessage="Could not connect to server"
  ></app-loading-error-state>

  <!-- Providers Configuration -->
  <div *ngIf="!notificationProviderLoading() && !notificationProviderLoadError()">
    <p-card styleClass="settings-card h-full">
      <ng-template pTemplate="header">
        <div class="flex align-items-center justify-content-between p-3 border-bottom-1 surface-border">
          <div class="header-title-container">
            <h2 class="card-title m-0">Notification Providers</h2>
            <span class="card-subtitle">Configure notification providers to receive alerts</span>
          </div>
        </div>
      </ng-template>

      <div class="card-content">
        <!-- Providers List -->
        <div class="items-list">
        <div 
          *ngFor="let provider of notificationProviderStore.notificationProviders()" 
          class="item-item p-3 border-round surface-border border-1 mb-3"
          [ngClass]="{ 'enabled': provider.isEnabled }"
        >
          <div class="flex justify-content-between align-items-center">
            <div class="item-info flex-1">
                <div>
                  <div class="flex align-items-center mb-2">
                    <h4 class="m-0 mr-2">{{ provider.name }}</h4>
                    <p-tag 
                      [value]="provider.type | titlecase" 
                      [severity]="'info'"
                      class="mr-2"
                    ></p-tag>
                    <p-tag 
                      [value]="provider.isEnabled ? 'Enabled' : 'Disabled'" 
                      [severity]="provider.isEnabled ? 'success' : 'secondary'"
                    ></p-tag>
                  </div>
              <div class="item-details text-sm text-color-secondary">
                <span *ngIf="provider.events.onFailedImportStrike" class="mr-2">❌ Failed Import</span>
                <span *ngIf="provider.events.onStalledStrike" class="mr-2">⏸️ Stalled</span>
                <span *ngIf="provider.events.onSlowStrike" class="mr-2">🐌 Slow</span>
                <span *ngIf="provider.events.onQueueItemDeleted" class="mr-2">🗑️ Queue Deleted</span>
                <span *ngIf="provider.events.onDownloadCleaned" class="mr-2">🧹 Download Cleaned</span>
                <span *ngIf="provider.events.onCategoryChanged" class="mr-2">🏷️ Category Changed</span>
                  </div>
                </div>
            </div>
            <div class="item-actions">
              <button 
                pButton 
                type="button" 
                icon="pi pi-play" 
                class="p-button-rounded p-button-text p-button-sm mr-1"
                pTooltip="Test notification"
                tooltipPosition="left"
                [loading]="testing()"
                (click)="testProvider(provider)"
              ></button>
              <button 
                pButton 
                type="button" 
                icon="pi pi-pencil" 
                class="p-button-rounded p-button-text p-button-sm mr-1"
                pTooltip="Edit provider"
                tooltipPosition="left"
                [disabled]="saving()"
                (click)="openEditProviderModal(provider)"
              ></button>
              <button 
                pButton 
                type="button" 
                icon="pi pi-trash" 
                class="p-button-rounded p-button-text p-button-danger p-button-sm"
                pTooltip="Delete provider"
                tooltipPosition="left"
                [disabled]="saving()"
                (click)="deleteProvider(provider)"
              ></button>
            </div>
          </div>
        </div>

        <div 
          *ngIf="notificationProviderStore.notificationProviders().length === 0" 
          class="no-items text-center py-5 text-color-secondary"
        >
          <i class="pi pi-bell text-4xl mb-3"></i>
          <p class="m-0">No notification providers configured</p>
          <small>Add a provider to start receiving notifications</small>
        </div>

        <!-- Action buttons -->
        <div class="card-footer mt-3">
          <button 
            pButton 
            type="button" 
            icon="pi pi-plus" 
            label="Add Provider"
            class="p-button-primary"
            [disabled]="saving()"
            (click)="openAddProviderModal()"
          ></button>
        </div>
        </div>
      </div>
    </p-card>
  </div>
</div>

<!-- Legacy Provider Modal (for unsupported provider types) -->
<p-dialog 
  [(visible)]="showProviderModal" 
  [modal]="true" 
  [closable]="true"
  [draggable]="false"
  [resizable]="false"
  styleClass="instance-modal"
  [header]="modalTitle"
  (onHide)="closeProviderModal()"
>
  <div class="text-center py-4">
    <i class="pi pi-info-circle text-4xl mb-3 text-color-secondary"></i>
    <h3>Provider Type Not Yet Supported</h3>
    <p class="text-color-secondary">
      This provider type is not yet supported by the new modal system.
      <br>Please select Notifiarr or Apprise for now.
    </p>
    <button 
      pButton 
      type="button" 
      label="Close" 
      class="p-button-text mt-3"
      (click)="closeProviderModal()"
    ></button>
  </div>
</p-dialog>

<!-- Provider Type Selection Modal -->
<app-provider-type-selection
  [visible]="showTypeSelectionModal"
  (providerSelected)="onProviderTypeSelected($event)"
  (cancel)="onTypeSelectionCancel()"
></app-provider-type-selection>

<!-- Notifiarr Provider Modal -->
<app-notifiarr-provider
  [visible]="showNotifiarrModal"
  [editingProvider]="editingProvider"
  [saving]="saving()"
  [testing]="testing()"
  (save)="onNotifiarrSave($event)"
  (cancel)="onProviderCancel()"
  (test)="onNotifiarrTest($event)"
></app-notifiarr-provider>

<!-- Apprise Provider Modal -->
<app-apprise-provider
  [visible]="showAppriseModal"
  [editingProvider]="editingProvider"
  [saving]="saving()"
  [testing]="testing()"
  (save)="onAppriseSave($event)"
  (cancel)="onProviderCancel()"
  (test)="onAppriseTest($event)"
></app-apprise-provider>

<!-- Ntfy Provider Modal -->
<app-ntfy-provider
  [visible]="showNtfyModal"
  [editingProvider]="editingProvider"
  [saving]="saving()"
  [testing]="testing()"
  (save)="onNtfySave($event)"
  (cancel)="onProviderCancel()"
  (test)="onNtfyTest($event)"
></app-ntfy-provider>

<!-- Confirmation Dialog -->
<p-confirmDialog></p-confirmDialog>

<!-- Toast for notifications -->
<p-toast></p-toast>
